import React, { useRef, useState, useEffect } from 'react'
import { Layout, Menu, Breadcrumb, notification, Affix, BackTop, Modal } from 'antd';
import {
    HomeFilled,
    AppstoreFilled,
    SketchCircleFilled,
    AccountBookFilled,
    SmileFilled,
    MessageFilled,
    SmileOutlined,
    CaretUpFilled
} from '@ant-design/icons';
import { Head } from '../../components/head';
import { useNavigate, Outlet, useLocation } from 'react-router-dom';
import { ajax } from './../../api/index';
import { useRootStore } from './../../index';




const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
const iconPuls: object = { fontSize: 20 }
const DeskUser: any = JSON.parse(localStorage.getItem("DeskUser") || "0")


const openNotification = (placement: any) => {
    notification.info({
        message: `温馨提示`,
        description:
            '您的权限不足，无法访问该功能',
        placement,
    });
};



const Index = () => {
    const Store = useRootStore()
    const keyS = useLocation().key
    const Location = useLocation().pathname.split("/") //获取当前路由
    let [collapsed, setCollapsed] = useState(false)
    const navigate = useNavigate()

    useEffect(() => {

        if (DeskUser) {
            notification.open({
                message: '欢迎您的到来，' + DeskUser.name,
                description:
                    '每个人都可能会碰到特别难熬的阶段，或长或短，让你感到绝望，看不到光。可是，沉溺于抱怨、苦恼是没有用的，难过痛苦更加无济于事，倒不如收拾收拾心情，抖擞抖擞精神，昂首挺胸去面对，也许一切就会柳暗花明。',
                icon: <SmileOutlined style={{ color: '#108ee9' }} />,
            });
            
           
        } else {
            navigate(`/login`)
        }
    }, [])



    const onCollapse = (collapsed: any) => {  //切换侧边栏收缩
        setCollapsed(!collapsed);
    };

    return (
        <div>
            <Layout style={{ minHeight: '100vh' }} hasSider={true} >
                <Affix offsetTop={0} className="Affix-Sider">
                    <Sider collapsible collapsed={collapsed} width={250} onCollapse={() => onCollapse(collapsed)} style={{ background: "#fff", height: "100%", boxShadow: "0 0 28px rgb(0 0 0 / 15%)" }} >
                        <div className="logo" style={{ height: 67 }} >
                            <img style={{ height: collapsed ? 15 : 35, transition: "300ms" }} src="http://v.bootstrapmb.com/2020/8/kxifo8639/vendors/images/deskapp-logo.svg" alt="" />
                        </div>
                        <Menu theme="light" defaultSelectedKeys={["1"]} mode="inline" style={{ fontWeight: 600, fontSize: 16 }}>
                            <Menu.Item key="1" onClick={() => navigate("/home/index")} icon={<HomeFilled style={iconPuls} />}>
                                {"首页"}
                            </Menu.Item>
                            <Menu.Item key="2" onClick={() => navigate("/home/OrderForm")} icon={< AccountBookFilled style={iconPuls} />} >
                                订单管理
                            </Menu.Item>
                            <SubMenu key="sub1" icon={<AppstoreFilled style={iconPuls} />} title="商品管理" >
                                <Menu.Item key="3" onClick={() => DeskUser.role >= 3 ? navigate("/home/AddCommodity") : openNotification('bottom')} >添加商品</Menu.Item>
                                <Menu.Item key="4" onClick={() => navigate("/home/CommodityList")}>商品列表</Menu.Item>
                                <Menu.Item key="5">Alex</Menu.Item>
                            </SubMenu>
                            <SubMenu key="sub2" icon={<SketchCircleFilled style={iconPuls} />} title="会员管理">
                                <Menu.Item key="6">Team 1</Menu.Item>
                                <Menu.Item key="8">Team 2</Menu.Item>
                            </SubMenu>
                            
                            <Menu.Item key="9" icon={<MessageFilled style={iconPuls} />}>
                                评论审核
                            </Menu.Item>
                            <Menu.Item key="10" onClick={()=>navigate("/home/information")} icon={<SmileFilled style={iconPuls} />}>
                                个人中心
                            </Menu.Item>
                        </Menu>
                    </Sider>
                </Affix>
                <Layout className="site-layout">
                    <Affix offsetTop={0}>
                        <Header className="site-layout-background" style={{ height: 70, padding: 0, boxShadow: "0 0 28px rgb(0 0 0 / 15%)" }} >
                            <Head DeskUser={DeskUser} />
                        </Header>
                    </Affix>
                    <Content className='contentS' style={{ margin: '0 16px', overflow: "hidden" }}>
                        <Breadcrumb style={{ margin: '16px 0' }}>
                            {
                                Location ? Location.map((item, index) => {
                                    return (
                                        <Breadcrumb.Item key={index}>{item}</Breadcrumb.Item>
                                    )
                                }) : <Breadcrumb.Item>index</Breadcrumb.Item>
                            }
                        </Breadcrumb>
                        <div className="site-layout-background" style={{ minHeight: 360 }}>
                        {
                            Store.data ? <Outlet></Outlet> : null
                        } 
                            {/* 路由出口 */}
                        </div>
                    </Content>
                    <Footer style={{ textAlign: 'center' }}> Desk ©2018 Created by Ant UED</Footer>
                </Layout>
            </Layout>
            <BackTop>
                <div className='up'><CaretUpFilled /></div>
            </BackTop>
        </div>
    )
}

export default Index